<template>
  <div class="full-box bar02">
    <v-chart class="chart" :option="chartOption" autoresize />
  </div>
</template>

<script>
import {graphic} from 'echarts'

import refreshMixin from "@/package/widget/mixins/refreshMixin";
import vChart from "vue-echarts";
import {getDataJson} from "@/utils/refreshCptData";
import {getBaseChartOption} from "@/package/widget/chart/01base/util";

export default {
  name: 'bar02',
  cnName: '圆柱图',
  mixins: [refreshMixin],
  components: {vChart},
  props: {
    option: Object
  },
  data() {
    return {
      chartOption: {},
      cptData:[]
    }
  },
  methods: {
    loadData() {
      getDataJson(this.option.cptDataForm).then(res => {
        this.cptData = res;
        this.loadChart(this.option.attribute);
      })
    },
    loadChart(attribute) {
      const opt = getBaseChartOption(attribute)
      delete opt.legend
      const colors = attribute.series.colors

      const series = []
      const data = this.cptData

      const names = []
      const values = []
      data.forEach(item => {
        names.push(item.name)
        values.push(item.value)
      })

      opt.xAxis.data = names

      series.push({
        name: "",
        type: 'pictorialBar',
        symbolSize: [20, 10],
        symbolOffset: [0, -6],
        symbolPosition: 'end',
        z: 12,
        tooltip:{
          show:false
        },
        label: {
          ...attribute.series.label
        },
        color: colors[0],
        data: values
      })
      series.push({
        name: '',
        type: 'pictorialBar',
        symbolSize: [20, 10],
        symbolOffset: [0, 7],
        z: 12,
        tooltip:{
          show:false
        },
        color: colors[2],
        data: values
      })

      series.push({
        type: 'bar',
        barWidth: "20",
        barGap: '10%', // Make series be overlap
        barCateGoryGap: '10%',
        itemStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 0.7, [{
              offset: 0,
              color: colors[1]
            },
              {
                offset: 1,
                color: colors[2]
              }
            ]),
            opacity: .8
          },
        },
        data: values
      })

      opt.series = series
      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadChart(newVal)
      },
      deep: true
    }
  },
  mounted() {
    this.refreshCptData()
  }
}
</script>

<style lang="less" scoped>
.index {
}
</style>
